<template>
  <div class="block">
    <span>
      <h3>最新通知</h3>
    </span>
    <el-divider style="border-top:white" />
    <el-date-picker
      v-model="NoticeTime"
      type="month"
      :default-value="NoticeTime"
      format="yyyy年MM月"
    />
    <el-divider style="border-top:white" />
    <div v-loading="loading" style="overflow-y: auto;height:35rem">
      <NoData v-show="totalCount===0" />
      <el-timeline :reverse="reverse">
        <NoticeCard
          v-for="(activity, index) in noticeList"
          :key="index"
          :activity="activity"
          placement="top"
          @getDetails="getDetails(activity.id)"
        />
      </el-timeline>
    </div>
    <div style="position: absolute; bottom:1rem;">
      <Pagination :pagesetting.sync="page" :total-count="totalCount" />
    </div>
  </div>
</template>
<script>
import { list } from '@/api/zzxt/notice'
import { parseTime } from '@/utils'
export default {
  name: 'Notice',
  components: {
    Pagination: () => import('@/components/Pagination'),
    NoData: () => import('@/views/Loading/NoData'),
    NoticeCard: () => import('./NoticeCard')
  },
  prop: {},
  data: () => ({
    loading: false,
    noticeList: [],
    reverse: true,
    page: { pageIndex: 0, pageSize: 10 },
    totalCount: 0,
    NoticeTime: null,
    usernameDict: {}
  }),
  computed: {
    noticeTypesArray() {
      return this.$store.state.notice.noticeTypesArray
    }
  },

  watch: {
    NoticeTime: {
      handler(val) {
        if (!this.noticeTypesArray) return
        this.refresh()
      }
    },
    page: {
      handler(val) {
        if (!this.noticeTypesArray) return
        this.refresh()
      },
      deep: true
    },
    noticeTypesArray: {
      handler(val) {
        if (!val) return
        this.refresh()
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    const DateNow = new Date()
    this.NoticeTime = DateNow
  },
  methods: {
    async refresh() {
      this.loading = true
      const query = {
        page: this.page,
        type: this.noticeTypesArray
      }
      if (this.NoticeTime) {
        const start = new Date(this.NoticeTime)
        const end = new Date(start)
        start.setDate(1)
        end.setMonth(end.getMonth() + 1)
        end.setDate(0)
        query.sendTime = [
          parseTime(start, '{y}-{m}-{d}'),
          parseTime(end, '{y}-{m}-{d}')
        ]
      }
      await list(query)
        .then(data => {
          this.noticeList = data.list
          this.totalCount = data.totalCount
        })
        .finally(() => {
          this.loading = false
        })
    },
    getDetails(row) {
      this.$router.push({
        path: '/documentAndNotice/notice/viewer',
        query: {
          id: row
        }
      })
    }
  }
}
</script>
<style>
.el-card__header {
  padding: 0.4rem 0.8rem;
}
.el-card__body {
  padding: 0.6rem 0.5rem;
  margin-bottom: 0.3rem;
}
.el-card__body p {
  margin-bottom: 0.5rem;
}
.el-card__body .span {
  display: block;
  text-align: right;
  color: #c0c4cc;
}
.block {
  padding: 30px;
  border: 2px solid #eff2f6;
  width: 100%;
  height: 50rem;
  box-sizing: border-box;
}
._blank {
  font: 12px/22px 'SimSun', 'Arial Narrow';
  list-style: none;
  line-height: 24px;
  font-size: 14px;
  color: #1f3b7b;
  text-decoration: none;
  outline: none;
}
</style>
